<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head th:replace="common/header :: common_head(~{::title},~{},~{::link},~{})">
    <title th:text="'充值_'+${application.website.name}"></title>
    <link rel="stylesheet" href="/css/base.css"/>
    <link rel="stylesheet" href="/css/main.css"/>
</head>
<body class="">

<div th:replace="common/top :: top('')">
</div>

<form action="/pay/aliPay" method="post" id="payform" name="payform">
    <div class="main box_center cf">

        <div class="channelWrap channelPay cf">

            <div class="payBox cf">
                <div class="payHead cf">
                    <div class="fl">
                        充值账号：<span class="user_name" id="my_name"></span>余额：<em class="red" id="accountBalance">0</em>屋币
                        <!--<em class="red">+0</em>代金券-->
                    </div>
                </div>
                <div class="payCon">
                    <h5>选择充值方式</h5>
                    <ul class="pay_way cf" id="ulPayType">
                        <li class="on" valp="1"><img class="pay_pic" src="../images/pay_zfb.png" alt="支付宝支付"/></li>
                        <li valp="2"><img class="pay_pic" src="../images/pay_wx.png" alt="微信支付"/></li>

                    </ul>
                    <h5>选择充值金额</h5>
                    <ul class="pay_way cf" id="ulZFWX">
                        <li vals="1"><strong>1元</strong><span class="pay_mn">100屋币</span></li>
                        <li vals="10"><strong>10元</strong><span class="pay_mn">1000屋币</span></li>
                        <li vals="30"><strong>30元</strong><span class="pay_mn">3000屋币</span></li>
                        <li vals="50"><strong>50元</strong><span class="pay_mn">5000屋币
                            <!--<em class="red">+ 送500代金券</em>--></span></li>
                        <li vals="100"><strong>100元</strong><span class="pay_mn">10000屋币
                            <!--<em class="red">+ 送1200代金券</em>--></span></li>
                        <li vals="200"><strong>200元</strong><span class="pay_mn">20000屋币
                            <!--<em class="red">+ 送3000代金券</em>--></span></li>
                        <li vals="500"><strong>500元</strong><span class="pay_mn">50000屋币
                            <!--<em class="red">+ 送10000代金券</em>--></span></li>
                        <li class="custom-amount">
                            <strong>
                                <input type="number"
                                       placeholder="请输入自定义金额"
                                       min="1"
                                       step="1"
                                       class="custom-input"
                                       onkeydown="if(event.keyCode==13){document.getElementById('payform').submit();}"/>
                            </strong>
                            <span class="pay_mn">
                                <span id="custom-coin">0</span>屋币
                                <!--<em class="red">+ 送10000代金券</em>-->
                            </span>
                        </li>
                    </ul>
                    <ul class="pay_way cf" style="display:none;" id="ulPayPal">
                        <li vals="20"><strong>20美元</strong><span class="pay_mn">10000屋币</span></li>
                        <li vals="50" class="on"><strong>50美元</strong><span class="pay_mn">25000屋币<em class="red"></em></span>
                        </li>
                        <li vals="100"><strong>100美元</strong><span class="pay_mn">50000屋币<em class="red"></em></span>
                        </li>
                    </ul>
                    <ul class="pay_Checkout" id="ulZFWXXJ">
                        <li>当前汇率：1元=100屋币</li>
                        <li>总计金额：<em class="red" id="showTotal">￥50元</em> 获得 <em class="red" id="showRemark">5000屋币
                            <!--+500代金券--></em></li>
                        <li style="display:none"><a class="btn_red" href="pay_success.html"
                                                    onclick="javascript:UserPay.sendPay();">立即支付</a></li>
                    </ul>
                    <ul class="pay_Checkout" style="display:none;" id="ulPayPalXJ">
                        <li>当前汇率：1美元=500屋币</li>
                        <li>总计金额：<em class="red" id="showPayPalTotal">50美元</em> 获得 <em class="red"
                                                                                       id="showPayPalRemark">25000屋币</em>
                        </li>
                        <li style="display:none"><a class="btn_red" href="javascript:void(0);"
                                                    onclick="javascript:UserPay.sendPay();">立即支付</a></li>
                    </ul>
                </div>
                <div class="payFoot">
                    <strong class="tip_tit">温馨提示</strong>
                    <ul class="tip_list">
                        <li>1. 充值阅读权限仅限本书城使用</li>
                        <li>2. 充值支持信用卡、借记卡、支付宝余额、微信零钱等支付</li>
                        <li>3. 包年时间是365天，重复购买时间会累加</li>
                        <li>4. 若充值遇到问题，<a href="/user/feedback.html" target="_blank" class="unlink black9">点此留言</a></li>
                    </ul>
                </div>
            </div>

        </div>
    </div>
    <input type="hidden" id="pValue" name="payAmount"/>
</form>


<div th:replace="common/footer :: footer">
</div>
<div th:replace="common/js :: js"></div>
<script src="/javascript/pay.js" type="text/javascript"></script>

<script type="text/javascript">
    // 查询用户信息
    $.ajax({
        type: "get",
        url: "/user/userInfo",
        data: {},
        dataType: "json",
        success: function (data) {
            if (data.code == 200) {
                if (data.data.nickName) {
                    $("#my_name").html(data.data.nickName);
                } else {
                    $("#my_name").html(data.data.username);
                }
                $("#accountBalance").html(data.data.accountBalance);
            } else if (data.code == 1001) {
                //未登录
                location.href = '/user/login.html?originUrl=' + encodeURIComponent(location.href);
            } else {
                layer.alert(data.msg);
            }
        },
        error: function () {
            layer.alert('网络异常');
        }
    });

    // 处理金额选项点击事件
    $("#ulZFWX").find("li").click(function (e) {
        // 检查点击目标是否是输入框
        if ($(e.target).hasClass('custom-input')) {
            return; // 如果是输入框，则不执行后续操作
        }

        var payType = $("#ulPayType").find("li.on").attr("valp");
        if (payType == 2) {
            layer.alert("微信支付暂未开通，敬请期待");
            return;
        }

        // 如果是自定义金额选项
        var customAmount=0;
        var coin=0;
        if ($(this).hasClass('custom-amount')) {
            customAmount = $(".custom-input").val();
            if (!customAmount || customAmount < 1) {
                layer.alert("请输入有效的金额");
                return;
            }
            coin=customAmount * 100;
            // $("#pValue").val(customAmount);
        } else {
            currentAmount = $(this).attr("vals");
            coin=currentAmount * 100;
            // $("#pValue").val($(this).attr("vals"));
        }
        // 显示确认框
        layer.confirm('确认充值 ' + currentAmount + ' 元，获得 ' + coin + ' 屋币吗？', {
            btn: ['确认', '取消']
        }, function(){
            $("#pValue").val(currentAmount);
            $("#payform").submit();
        }, function(){
            // 取消操作
        });
        // $("#payform").submit();
    });

    // 处理自定义金额输入框的Enter键事件
    $(".custom-input").keydown(function(e) {
        if (e.keyCode == 13) {

            var payType = $("#ulPayType").find("li.on").attr("valp");
            if (payType == 2) {
                layer.alert("微信支付暂未开通，敬请期待");
                return;
            }

            var customAmount = $(this).val();
            if (!customAmount || customAmount < 1) {
                layer.alert("请输入有效的金额");
                return false;
            }
            $("#pValue").val(customAmount);
            $("#payform").submit();

            return false;// 阻止事件冒泡和默认行为
        }

    });

    // 更新自定义金额对应的屋币显示
    $(".custom-input").on('input', function() {
        var amount = $(this).val();
        if (amount && amount > 0) {
            $("#custom-coin").text(amount * 100);
        } else {
            $("#custom-coin").text(0);
        }
    });

</script>

</body>
</html>